<div style="position: relative;width: 1200px;padding: 24px 0;left: calc(50% - 600px)">
  <div class="firstRow">
    <div class="left">

      <!--    基础信息-->
      <div>
        <h2>基础信息</h2>
        <div class="flexRow">
          <span class="label">商品名称</span>
          <div class="mform-control">
            <input nz-input placeholder="请输入商品名称" [(ngModel)]="formData.title" />
          </div>
        </div>

        <div class="flexRow">
          <span class="label">短名称</span>
          <div class="mform-control">
            <input nz-input placeholder="请输入短名称" [(ngModel)]="formData.name" />
          </div>
        </div>

        <div class="flexRow">
          <span class="label"><span>*</span>适用用户</span>
          <div>
            <nz-radio-group [(ngModel)]="formData.userType">
              <label nz-radio [nzValue]="0">不限</label>
              <label nz-radio [nzValue]="1">C端</label>
              <label nz-radio [nzValue]="2">B端</label>
            </nz-radio-group>
          </div>
        </div>
        <div class="flexRow">
          <span class="label">二手换机补贴</span>
          <div>
            <nz-radio-group [(ngModel)]="formData.renewalFlag">
              <label nz-radio [nzValue]="1">开启</label>
              <label nz-radio [nzValue]="0">关闭</label>
            </nz-radio-group>
            <span style="color: #1890FF;cursor: pointer" nz-popover [nzPopoverContent]="contentTemplate">规则？</span>
            <ng-template #contentTemplate>
              <div *ngFor="let i of usedSwapList">旧机实际总回收价满{{i['price']}}元补贴{{i['allowance']}}元</div>
            </ng-template>
          </div>
        </div>
        <div class="flexRow">
          <span class="label" style="align-self: flex-start">服务保障</span>
          <div>
            <nz-checkbox-group [(ngModel)]="safeguardOptions" style="white-space: break-spaces;max-width: 500px"></nz-checkbox-group>
          </div>
        </div>
        <!-- <div class="flexRow">
          <span class="label" style="align-self: flex-start">商品属性</span>
          <div>
            <nz-checkbox-group [(ngModel)]="attrOptions" style="white-space: break-spaces;max-width: 500px"></nz-checkbox-group>
          </div>
        </div> -->
      </div>
      <!--    价格信息-->
      <div>
        <h2>价格信息</h2>
        <div class="flexRow">
          <span class="label"><span>*</span>B端售价</span>
          <div>
            <nz-input-number
              nzPlaceHolder="价格"
              [nzPrecision]="0"
              [nzMin]="0" [nzMax]="999999999"
              [nzStep]="1"
              nzDisabled
              [(ngModel)]="formData.shopPriceB"
              (ngModelChange)="priceChange($event, 'b')"
            ></nz-input-number>
            <ng-container *ngIf="formData.shopPriceB">
              <span class="red-color m-l-10">预估利润: {{ profitObjs.profitB }}</span>
              <span class="green-color m-l-10">成本利润率: {{ profitObjs.profitRateB }} %</span>
            </ng-container>
          </div>
        </div>
        <div class="flexRow">
          <span class="label"><span>*</span>C端售价</span>
          <div>
            <nz-input-number
              nzPlaceHolder="价格"
              [nzPrecision]="0"
              [nzMin]="0"
              [nzMax]="999999999"
              [nzStep]="1"
              nzDisabled
              [(ngModel)]="formData.shopPriceC"
              (ngModelChange)="priceChange($event, 'c')"
            ></nz-input-number>
            <ng-container *ngIf="formData.shopPriceC">
              <span class="red-color m-l-10">预估利润: {{ profitObjs.profitC }}</span>
              <span class="green-color m-l-10">成本利润率: {{ profitObjs.profitRateC }} %</span>
            </ng-container>
          </div>
        </div>

        <div
          *ngIf="permissionService.userPermission.has('used-store:usedCommodityList:priceChange') && [1, 5, 7].includes(info?.status)"
          class="flexRow"
        >
          <div style="padding-left: 132px;">
            <button
              nz-button
              nzType="primary"
              (click)="priceChangeVisible = true"
            >改价</button>
          </div>
        </div>
      </div>

      <!-- S 机器信息 -->
      <div>
        <h2>机器信息</h2>
        <div class="flexRow">
          <span class="label"><span>*</span>颜色</span>
          <div class="mform-control">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择颜色" [(ngModel)]="formData.color">
              <ng-container *ngFor="let color of colorOptions">
                <nz-option [nzLabel]="color" [nzValue]="color"></nz-option>
              </ng-container>
            </nz-select>
          </div>
        </div>

        <div class="flexRow">
          <span class="label"><span>*</span>网络制式</span>
          <div class="mform-control">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择网络制式" [(ngModel)]="formData.network">
              <ng-container *ngFor="let item of networkOptions">
                <nz-option [nzLabel]="item.label" [nzValue]="item.label"></nz-option>
              </ng-container>
            </nz-select>
          </div>
        </div>

        <div class="flexRow">
          <span class="label"><span>*</span>版本</span>
          <div class="mform-control">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择版本" [(ngModel)]="formData.version">
              <ng-container *ngFor="let item of editionOptions">
                <nz-option [nzLabel]="item.label" nzValue="{{ item.label }}"></nz-option>
              </ng-container>
            </nz-select>
          </div>
        </div>

        <div class="flexRow">
          <span class="label"><span>*</span>IMEI</span>
          <div class="mform-control">
            <input nz-input placeholder="请输入IMEI" [(ngModel)]="formData.imei" />
          </div>
        </div>

        <div class="flexRow">
          <span class="label">私修痕迹</span>
          <div class="mform-control">
            <nz-radio-group [(ngModel)]="formData.isPrivateRepair">
              <label nz-radio [nzValue]="1">有</label>
              <label nz-radio [nzValue]="0">无</label>
            </nz-radio-group>
          </div>
        </div>

        <div class="flexRow">
          <span class="label">保修截止</span>
          <div class="mform-control">
            <nz-date-picker nzPlaceHolder="请选择保修截止日期" [(ngModel)]="formData.guaranteeTime"></nz-date-picker>
          </div>
        </div>

        <div class="flexRow">
          <span class="label">电池健康值</span>
          <div class="mform-control">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择电池健康值" [(ngModel)]="formData.batteryHealth">
              <ng-container *ngFor="let item of batteryOptions">
                <nz-option [nzLabel]="item.name" [nzValue]="item.content"></nz-option>
              </ng-container>
            </nz-select>
          </div>
        </div>

        <div class="flexRow">
          <span class="label">充电次数</span>
          <div class="mform-control">
            <nz-input-number
              [nzMin]="0"
              [nzMax]="999999"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入充电次数"
              [(ngModel)]="formData.chargeCount">
            </nz-input-number>
          </div>
        </div>

        <div class="flexRow">
          <span class="label">屏幕尺寸</span>
          <div class="mform-control">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择屏幕尺寸" [(ngModel)]="formData.screenSize">
              <ng-container *ngFor="let item of screenSizeOptions">
                <nz-option [nzLabel]="item.name" [nzValue]="item.content"></nz-option>
              </ng-container>
            </nz-select>
          </div>
        </div>

        <div class="flexRow">
          <span class="label">CPU型号</span>
          <div class="mform-control">
            <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择CPU型号" [(ngModel)]="formData.cpuModel">
              <ng-container *ngFor="let item of cpuOptions">
                <nz-option [nzLabel]="item.name" [nzValue]="item.content"></nz-option>
              </ng-container>
            </nz-select>
          </div>
        </div>

        <div class="flexRow">
          <span class="label">电池容量</span>
          <div class="mform-control">
            <nz-input-number
              [nzMin]="0"
              [nzMax]="999999"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入电池容量"
              [(ngModel)]="formData.batterySize">
            </nz-input-number>
            <span class="p-l-5">mAh</span>
          </div>
        </div>
      </div>
      <!-- E 机器信息 -->

      <!--    图片信息-->
      <div>
        <h2>图片信息</h2>
        <div class="flexRow">
          <span class="label" style="align-self: flex-start">爱思截图</span>
          <div>
            <app-image-upload [addFileArea]="true" [deleteBtnVisible]="true" [imageUrl]="formData.asImg" [isUsedCommodity]="true"
                              (deleteImg)="formData.asImg=''"
                              (urlChange)="formData.asImg=$event"></app-image-upload>
          </div>
        </div>

        <div class="flexRow">
          <span class="label" style="align-self: flex-start"><span>*</span>真机图片</span>
          <app-image-upload [addFileArea]="true" [deleteBtnVisible]="true" [imageUrls]="formData.imgs" [isUsedCommodity]="true"
                            (deleteImg)="removeImg($event)" (urlChange)="appendImg($event)"
                            [maxImgLength]="20"></app-image-upload>
        </div>
      </div>
    </div>
    <div class="right">
      <h2>基础信息</h2>

      <div class="flexRow" *ngIf="deviceInfo?.supplierId === 0">
        <div>成交价</div>
        <div>¥{{ (deviceInfo?.realValuation || 0) + (deviceInfo?.aprc || 0) + (deviceInfo?.cprc || 0) }}</div>
      </div>
      <div class="flexRow" *ngIf="deviceInfo?.supplierId === 0">
        <div>建议零售价B</div>
        <div>¥{{ this.sumRetailPrice(1.1) }}</div>
      </div>
      <div class="flexRow" *ngIf="deviceInfo?.supplierId === 0">
        <div>建议零售价C</div>
        <div>¥{{ this.sumRetailPrice(1.2) }}</div>
      </div>

      <nz-divider></nz-divider>

      <div class="flexRow">
        <div>机器编号</div>
        <div>{{deviceInfo?.equipmentCode}}</div>
      </div>
      <div class="flexRow" *ngIf="deviceInfo?.supplierId === 0">
        <div>机器序列号</div>
        <div>{{deviceInfo?.serialNumber}}</div>
      </div>
      <div class="flexRow">
        <div [ngStyle]="{color: deviceInfo?.imei ? '#999999' : 'red'}">IMEI</div>
        <div>{{deviceInfo?.imei}}</div>
      </div>
      <div class="flexRow">
        <div>品牌</div>
        <div>{{deviceInfo?.typeName}}</div>
      </div>
      <div class="flexRow">
        <div>系列</div>
        <div>{{deviceInfo?.seriesName}}</div>
      </div>
      <div class="flexRow">
        <div>机型</div>
        <div>{{deviceInfo?.modelName}}</div>
      </div>
      <div class="flexRow">
        <div>成色</div>
        <div>{{deviceInfo?.colourName}}</div>
      </div>
      <div class="flexRow">
        <div>颜色</div>
        <div>{{deviceInfo?.color}}</div>
      </div>
      <div class="flexRow">
        <div>内存</div>
        <div>{{deviceInfo?.memory}}</div>
      </div>
      <div class="flexRow">
        <div [ngStyle]="{color: deviceInfo?.version ? '#999999' : 'red'}">版本</div>
        <div>{{deviceInfo?.version}}</div>
      </div>
      <div class="flexRow">
        <div [ngStyle]="{color: deviceInfo?.network ? '#999999' : 'red'}">网络制式</div>
        <div>{{deviceInfo?.network}}</div>
      </div>

      <ng-container *ngIf="deviceInfo?.supplierId === 0;else templateDsf">
        <div class="flexRow p-t-15" *ngIf="deviceInfo">
          <button nz-button nzType="primary" (click)="showReportModal(deviceInfo?.equipmentCode)">查看验机报告</button>
        </div>
      </ng-container>
      <ng-template #templateDsf>
        <div class="flexRow p-t-15" *ngIf="deviceInfo">
          <button nz-button nzType="primary" (click)="showReportImg()">查看质检报告图</button>
        </div>
      </ng-template>
    </div>
  </div>
  <div class="secondRow">
    <div class="left">
      <!--    质检结果-->
      <div>
        <h2>质检结果</h2>

        <div class="flexRow">
          <span class="label"><span>*</span>B端成色</span>
          <div class="mform-control">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择B端成色"
              [(ngModel)]="formData.colourIdB"
              (ngModelChange)="conditionChange($event, 'B')">
              <ng-container *ngFor="let item of conditionBoptions">
                <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
              </ng-container>
            </nz-select>
          </div>
        </div>

        <div class="flexRow">
          <span class="label"><span>*</span>C端成色</span>
          <div class="mform-control">
            <nz-select
              nzShowSearch
              nzAllowClear
              nzPlaceHolder="请选择C端成色"
              [(ngModel)]="formData.colourId"
              (ngModelChange)="conditionChange($event, 'C')">
              <ng-container *ngFor="let item of conditionCoptions">
                <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
              </ng-container>
            </nz-select>
          </div>
        </div>

        <div class="flexRow">
          <span class="label" style="align-self: flex-start">质检结果</span>
          <nz-textarea-count [nzMaxCharacterCount]="500" style="width: 400px">
            <textarea
              rows="4"
              nz-input
              maxlength="500"
              placeholder="请输入质检结果的描述内容"
              [(ngModel)]="formData.qualityResult">
            </textarea>
          </nz-textarea-count>
        </div>
        <div class="btnRow">
          <button nz-button nzType="primary" (click)="save()" *ngIf="permissionService.userPermission.has('used-store:usedCommodityList:edit')">保存</button>
          <button nz-button nzType="default" (click)="back()">取消</button>
        </div>
      </div>
    </div>

    <!-- <div class="right">
      <h2>估价记录</h2>
      <div class="flexRow">
        <div>机器编号</div>
        <div>5675135647874</div>
      </div>
    </div> -->
  </div>

</div>

<machine-report-modal #reportModalRef></machine-report-modal>

<!-- 改价 Modal -->
<second-price-change
  [(ngModel)]="priceChangeVisible"
  [goodsId]="info?.id"
  (priceChangeOk)="initData()"
></second-price-change>
